<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>供应商管理</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<body>
<style>
    body{
        background-color: white;
    }
</style>
<div id="sup">
    <template>
        <div slot="header">
            <el-form inline>
                <el-form-item label="名称">
                    <el-input v-model="vo.cliname"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="vo.cliaddress"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="add">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="supList.data" border stripe>
            <el-table-column prop="supId" label="编号"></el-table-column>
            <el-table-column prop="supName" label="名称"></el-table-column>
            <el-table-column prop="supPhone" label="联系方式"></el-table-column>
            <el-table-column prop="supAddress" label="地址">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button @click="update(row)">修改</el-button>
                    <el-button type="danger" @click="del(row.supId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--        分页-->
    <el-pagination
            :page-sizes="[3,6,9]"
            :current-page.sync="vo.pageNo"
            :page-size.sync="vo.pageSize"
            @current-change="search"
            @size-change="search"
            background
            layout="prev, pager, next,sizes"
            :total="supList.count">
    </el-pagination>
    <!--新增-->
    <el-dialog title="新增商品" :visible.sync="addFlag" center>
        <el-form label-width="80px" :model="cli">
            <el-form-item label="名称">
                <el-input v-model="cli.supName"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="cli.supPhone"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="cli.supAddress"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="insert" type="primary">提交</el-button>
                <el-button @click="call">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--    修改-->
    <el-dialog title="修改商品" :visible.sync="updFlag" center>
        <el-form label-width="80px">
            <el-form-item label="名称">
                <el-input v-model="uprow.supName"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="uprow.supPhone"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="uprow.supAddress"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="edit" type="primary">提交</el-button>
                <el-button @click="updFlag = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#sup",
        data: {
            supList: [],
            addFlag: false,
            updFlag:false,
            uprow:[],
            vo: {
                cliname: "",
                cliaddress: "",
                state: -1,
                pageNo: 1,
                pageSize: 6
            },
            cli: {
                supName: '',
                supPhone: '',
                supAddress: ''
            }
        },
        methods: {
            search() {
                axios.get("/cli/search", {params: this.vo})
                    .then(({data}) => {
                        this.supList = data;
                    })
            },
            add() {
                this.addFlag = true;
            },
            insert() {
                axios.post("/cli/addList", this.cli)
                    .then(({data})=>{
                        this.addFlag = false;
                        this.$message({
                            message:data.msg,
                            type:data.code==200?'success':'error'
                        });
                        this.search();
                        this.reset();
                    })
            },
            update(row){
                this.updFlag=true;
                this.uprow=row;
            },
            edit(){
              axios.put("/cli/edit",this.uprow)
                  .then(({data})=>{
                      this.updFlag = false;
                      this.$message({
                          message:data.msg,
                          type:data.code==200?'success':'error'
                      });
                      this.search();
                  })
            },
            del(id) {
                this.$confirm("确实要删除么？", "信息提示")
                    .then(() => {
                        axios.delete("/cli/del?id=" + id)
                            .then(({data}) => {
                                this.$message({
                                    message: data.msg,
                                    type: data.code == 200 ? 'success' : 'error'
                                });
                                this.search()
                            });
                    })
            },
            call(){
                this.addFlag=false;
                this.reset();
            },
            reset(){
                this.cli.supAddress='',
                this.cli.supName='',
                this.cli.supPhone='';
            }
        },
        mounted() {
            this.search();
        }
    })
</script>
</body>
</html>